<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap" rel="stylesheet">

    <style>
       *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

body {
    background-image: linear-gradient( 90.4deg, #fec7c3 1.1%, #fee8bd 22.7%, #fdfea2 37.2%, #a0fee9 55.4%, #a5edff 72.4%, #ebc3fe 101.9%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    user-select: none;
}

a {
    text-decoration: none;
    color: #000000;
    font-size: 10rem;
}

.wave {
    animation-name: wave-animation;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    transform-origin: 70% 70%;
    display: inline-block;
}

@keyframes wave-animation {
    0% {
        transform: rotate( 0.0deg)
    }
    10% {
        transform: rotate(14.0deg)
    }
    20% {
        transform: rotate(-8.0deg)
    }
    30% {
        transform: rotate(14.0deg)
    }
    40% {
        transform: rotate(-4.0deg)
    }
    50% {
        transform: rotate(10.0deg)
    }
    60% {
        transform: rotate( 0.0deg)
    }
    100% {
        transform: rotate( 0.0deg)
    }
}




    </style>
    <title>Moving Hand</title>
</head>
<body>
    <a href="">Hello Dev
        <span class="wave"> 👋</span>
     </a>
</body>
</html>